<template>
  <div ref="pieChart02" class="pie-chart-02 chart"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";

const pieChart02 = ref(null);
const echarts = inject("$echarts");

//  颜色集合
let colorList = [
  "#14C7F8",
  "#15AAF1",
  "#24B462",
  "#FFD52E",
  "#F97638",
  "#FF2919",
  "#fff",
];
let sum = 78;
let originalData = [
  { value: 1, name: "用火用电异常" },
  { value: 2, name: "防火门和防火..." },
  { value: 3, name: "安全出口、疏散..." },
  { value: 5, name: "消防重点部位..." },
  { value: 1, name: "安全疏散指示..." },
  { value: 2, name: "漏检现象" },
  { value: 4, name: "其他异常" },
];
let nameData = [];
let abnormal = 0;
for (let i = 0; i < originalData.length; i++) {
  nameData.push(originalData[i].name);
  abnormal = abnormal + originalData[i].value;
}
let normalData = [
  { value: abnormal, name: "异常" }, // 异常
  { value: sum - abnormal, name: "" }, // 正常
];
// 总数
let total = {
  value: normalData[0].value + normalData[1].value,
  name: "总数",
};
let normalRate = ((normalData[0].value / total.value) * 100).toFixed(1); // 保留一位小数
let item = {
  value: normalRate,
  name: "正常率",
};
const option = {
  compCode: "C202312003",
  backgroundColor: "rgba(3,23,30,1)",
  tooltip: {
    trigger: "item",
    backgroundColor: "#053962", // 设置背景色为半透明红色
    borderColor: "#165e9e", // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: "#fff",
    },
    formatter: "{b}: {c}",
  },
  title: [
    {
      text: "{value|" + normalRate + "}" + "{percent|%}",
      // text: item.value,
      left: "28%",
      top: "46%",
      textAlign: "center",
      textBaseline: "middle",
      textStyle: {
        // fontSize: 50,
      },
      textStyle: {
        rich: {
          value: {
            color: "#fff",
            fontWeight: "bold",
            fontSize: 35,
          },
          percent: {
            color: "#fff",
            fontWeight: "bold",
            fontSize: 15, // 设置数字字体大小
            // fontWeight: "bold", // 设置数字字体粗细
          },
        },
      },
    },
    {
      text: item.name,
      left: "28%",
      top: "53%",
      textAlign: "center",
      textBaseline: "middle",
      textStyle: {
        color: "#fff",
        fontWeight: "normal",
        fontSize: 16,
      },
    },
  ],
  legend: {
    icon: "circle",
    type: "plain",
    show: true,
    orient: "vertical",
    top: "center",
    right: "2%",
    height: 260,
    itemGap: 48,
    align: "left",
    textStyle: {
      color: "#FFF",
      fontSize: 14,
    },
    formatter: function (name) {
      let formatName = "";
      let per = 0;
      originalData.forEach(function (value, index, array) {
        let eachName = value.name;
        let totalValue = 0;
        if (name == eachName) {
          totalValue += value.value;
          per = ((totalValue / total.value) * 100).toFixed(1);
        }
      });
      formatName = name;
      return formatName;
    },
    data: nameData,
    //data:originalData
  },
  series: [
    // 第二层
    {
      center: ["28%", "50%"],
      emphasis: {
        scale: false,
      },
      radius: ["42%", "45%"],
      name: "pie",
      type: "pie",
      selectedMode: "single",
      selectedOffset: 16, //选中是扇区偏移量
      clockwise: true,
      startAngle: 90,
      label: {
        normal: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      itemStyle: {
        borderWidth: 5,
        borderColor: "rgba(3,23,30,1)",
      },
      emphasis: {
        borderWidth: 0,
        shadowBlur: 5,
        shadowOffsetX: 0,
        shadowColor: "rgba(0, 0, 0, 0.2)",
      },
      data: originalData,
    },
    // 最外层
    {
      type: "pie",
      data: [100],
      z: 1,
      radius: ["48%", "48.5%"],
      center: ["28%", "50%"],
      itemStyle: {
        color: "rgba(29,56,101,1)",
      },
      silent: true,
      labelLine: {
        normal: {
          show: false,
        },
      },
      label: {
        normal: {
          show: false,
          position: "center",
          textStyle: {
            fontSize: 14,
            color: "#000",
          },
        },
      },
    },
    // 第三层
    {
      type: "pie",
      data: normalData,
      z: 3,
      radius: ["18.5%", "38%"],
      center: ["28%", "50%"],
      itemStyle: {
        // color: "rgba(63,106,209,1)",
        color: function (params) {
          // 自定义每个扇区的颜色
          let colorList = ["rgb(1,223,244)", "rgb(63,106,209)"]; // 添加您希望的颜色
          return colorList[params.dataIndex % colorList.length];
        },
      },
      silent: true,
      labelLine: {
        normal: {
          show: false,
        },
      },
      label: {
        normal: {
          show: true,
          position: "inside", // 标签显示在扇形内部
          padding: [0, 0, 0, 20],
          formatter: function (params) {
            // 只在异常的扇形区域显示标签
            if (params.name == "异常") {
              return params.name + "\n" + params.value;
            } else {
              return "";
            }
          },
          textStyle: {
            fontSize: 18,
            color: "#000",
            fontWeight: "bold",
          },
        },
      },
    },
    {
      //内圈
      type: "pie",
      data: [100],
      z: 3,
      radius: ["0%", "28.5%"],
      center: ["28%", "50%"],
      itemStyle: {
        color: "rgba(35,71,121,1)",
      },
      silent: true,
      labelLine: {
        normal: {
          show: false,
        },
      },
      label: {
        normal: {
          show: false,
          position: "center",
          textStyle: {
            fontSize: 14,
            color: "#000",
          },
        },
      },
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(pieChart02.value);
  chart.setOption(option);
});
</script>
